<template>
    <div class="box">
        <van-form >
            <div class="title">
                <span></span>
                <p>发票详情</p>
            </div>
            <div class="types">
                <span class="name">抬头种类</span>
                <van-radio-group @change='typeChange' v-model="carInfo.type" direction="horizontal">
                    <van-radio class="radio_size" icon-size="16px" name="1">企业单位</van-radio>
                    <van-radio class="radio_size" icon-size="16px" name="2">个人/非企业单位</van-radio>
                </van-radio-group>
            </div>
            <van-field
                class="input_size"
                required
                v-model="carInfo.name"
                :label="name"
                placeholder="请填写发票抬头"
            />
            <van-field
            v-if="carInfo.type ==='1'"
            label="公司税号" 
            class="input_size"
            required
            v-model="carInfo.taxNumber"
            placeholder="请填写纳税人识别号"
            />
            <van-collapse v-model="activeNames" >
                <van-collapse-item title-class="input_size" title="更多内容" value="备注、地址、电话等" name="1">
                    <van-field
                    label="地址:" 
                    class="input_size"
                    v-model="carInfo.companyAddress"
                    placeholder="地址"
                    />
                    <van-field
                    label="电话号码:" 
                    class="input_size"
                    v-model="carInfo.companyPhone"
                    placeholder="电话"
                    />
                    <van-field
                    label="开户银行:" 
                    class="input_size"
                    v-model="carInfo.bankAccount"
                    placeholder="开户银行"
                    />
                    <van-field
                    label="银行账户:" 
                    class="input_size"
                    v-model="carInfo.bankNumber"
                    placeholder="银行账户"
                    />
                    <van-field
                    label="备注:" 
                    class="input_size"
                    v-model="carInfo.remarks"
                    placeholder="填写您其他需求"
                    />
                </van-collapse-item>
            </van-collapse>
            <div class="carNum">
                <van-field
                label="金额(元)：" 
                readonly
                class="input_size"
                v-model="carInfo.amount"
                placeholder="开票金额"
                />
                <div class="btn" @click="btn">点击切换</div>
            </div>
            <div class="title">
                <span></span>
                <p>接收方式</p>
            </div>
            <van-field
            label="电子邮箱" 
            required
            class="input_size"
            v-model="carInfo.email"
            placeholder="发票将发送至此邮箱"
            />
            
            <div class="tips">
                <!-- <p>温馨提示：</p>
                <p>1、个人发票类型只需要提供抬头名称;</p>
                <p>2、只提供增值税普通发票的开具(电子发票);</p>
                <p>3、发票开具后将以电子邮件形式发送至您所提供的电子邮箱中。</p> -->
                <div  style="margin: 16px;text-align: center;">
                    <van-button :loading='submit_loading' class="submit" type="info" @click="onSubmit">
                    提交
                    </van-button>
                </div>
            </div>
            
        </van-form>
        <foot :navUrl="url"/>
        <!--弹窗-->
        <van-popup v-model="show" @close="closePopup"  position="top">
            
            <div class="order" v-if="orderList.length>0">
                <div class='t_tips'>开具专票请联系客服：18631622812</div>
                <van-skeleton title :row="3" :loading="loading">
                    <div class="order_list">
                        <van-checkbox-group @change="itemChange" v-model="result" ref="checkboxGroup">
                            <van-checkbox :disabled='item.disabled '  v-for="(item,index) in orderList" :key="index" :name="item.id" class="checkbox">
                                <div class="item">
                                    <span v-if="item.disabled" style="color:red">该订单发票已经在审核</span>
                                    <div class="carNum">号牌号码：{{item.carNum}}</div>
                                    <div class="name">客户姓名：{{item.username}}</div>
                                    <div class="time">办理时间：{{item.dateStr}}</div>
                                    <div class="money">金额：<span>{{item.orderAmount}}</span>元</div>
                                </div>
                            </van-checkbox>
                            <div style="margin-bottom:50px"></div>
                        </van-checkbox-group>
                        <van-submit-bar class="next" :price="amount" button-text="下一步" @submit="nextClick">
                            <van-checkbox v-model="all_checked" @click="checkAll">全选</van-checkbox>
                        </van-submit-bar>
                    </div>
                </van-skeleton>
                
                <!-- <div class="foot_btn">
                    <van-checkbox v-model="all_checked" @click="checkAll">全选</van-checkbox>
                    <div class="all_money">100￥</div>
                    <van-button type="primary" @click="yes">确定</van-button>
                </div> -->
                
            </div>
            <div class="order" v-else>
                <p>当前没有可开发票的订单信息</p>
            </div>
        </van-popup>
    </div>
</template>
<script>
import foot from '@/views/footer.vue'
import { getDate } from '@/utils/index'
//import pdf from 'vue-pdf'
export default {
    name:'invoice',
    data(){
        return{
            url:'/',
            activeNames: [],
            name:'公司名称',
            carInfo:{
                type:'1',//发票类型
                amount:0,//金额
                userId:null,//(用户ID)
                orderIdStr:null,//(车辆订单ID)
                name:null,//(发票名称)
                taxNumber:null,//(税号)
                companyAddress:null,//(公司地址)
                companyPhone:null,//(公司电话)
                bankAccount:null,//(开户银行)
                bankNumber:null,//(银行账户)
                email:null,//(电子邮箱)
                remarks:null,//(备注) 
            },
            amount:0,
            show:false,
            submit_loading:false,
            loading:true,
            orderList:[],//订单列表
            result: [],
            show:true,
            all_checked:false
        }
    },
    created(){
        console.log(this.$route, '---- 车辆详情 --------',this.$route.params.vehicleList,'------------------')
        if (this.$route.params.carUser) {
            this.carInfo.userId = this.$route.params.carUser.id
        }else{
            this.$router.push('/')
        }
        this.queryOrder()
    },

    methods:{
        //全选
        checkAll() {
            if (!this.all_checked) {
                this.$refs.checkboxGroup.toggleAll(true);
                this.orderList.forEach(el=>{
                    if (el.invoiceCommitStatus ===1) {
                        this.result = this.result.map(e=>{
                           if(el.id != e) return e
                        })
                    }else{
                        this.result.forEach(item=>{
                            if (el.id === item) {
                                this.amount = this.amount+el.orderAmount*100
                            }
                        })
                    }
                    
                })
            }else{
                this.$refs.checkboxGroup.toggleAll(false);
                this.amount = 0
            }
            
            
            console.log('this.result------',this.result)
            
        },
        //单选
        itemChange(e){            
            console.log('this.result-------',e)
            
            if (this.result.length != this.orderList.length) {
                this.all_checked = false
                
            }else{
                this.all_checked = true
            }
            this.amount = 0
            this.orderList.forEach(el=>{
                if (el.invoiceCommitStatus ===1) {
                    
                }
                
                this.result.forEach(item=>{
                    if (el.id === item) {
                        this.amount = this.amount+el.orderAmount*100
                    }
                })
            })
        },
        //下一步
        nextClick(){
            if (this.result.length>0 && this.amount/100>0) {
                this.carInfo.amount = this.amount/100
                this.carInfo.orderIdStr = this.result.join(',')
                this.show = false
            }else{
                this.$toast('请选择要开票订单')
            }
        },
        //选择车牌
        btn(){
            this.show = true
        },
        //提交
        async onSubmit(values) {
            if (!this.carInfo.name) {
                this.$toast('请填写抬头名称')
            }else if(!this.carInfo.email){
                this.$toast('请填写电子邮箱')
            }else{
                var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if (!myreg.test(this.carInfo.email)) {
                    this.$toast('请填写正确的电子邮箱')
                }
                else {
                    console.log('submit', values);
                    this.submit_loading = true
                    let res = await this.$api.inxoiceAddInxoice(this.carInfo)
                    this.submit_loading = false
                    console.log('---------提交后返回res---------',res)
                    if (res.status === 200) {
                        this.$toast(res.message)
                        if (res.data.status !='450') {
                            this.$router.push('/')
                        }
                    }
                }
                
            }
            
        },
        //关闭弹窗
        closePopup(){
            if (this.result.length===0) {
                this.$router.push('/')
            }else{
                this.nextClick()
            }
        },
        // 车检数据查询
        async queryOrder() {
            let params = {
                userId: this.carInfo.userId
            }
            let { data } = await this.$api.queryOrder(params)
            this.loading = false
            if (data && data.list.length !== 0) {
                this.orderList = data.list.filter(el => {
                    el.dateStr = getDate(el.updateTime).h
                    console.log(el.invoiceStatus)
                    //if(el.invoiceCommitStatus)
                    if(el.invoiceCommitStatus ===1) el.disabled  = true
                    if(el.invoiceStatus !=1 && el.status>=25) return el
                    
                })
            } else {

            }
            console.log(data,this.orderList, '------------------- 车检数据查询 ----------------')
        },
        //选择发票种类
        typeChange(){
            if (this.carInfo.type === '1') {
                console.log('公司')
                this.name = '公司名称'
            }else{
                console.log('个人')
                this.name = '发票抬头'
            }
        }
    },
    filters:{
        dateStyle(v){
            let date = new Date(v)
            let Y = date.getFullYear()
            let M = date.getMonth()+1
            let D = date.getDate()
            if (M<10) {
                M = '0'+M
            }
            if (D<10) {
                D = '0'+D
            }
            let value = Y+'-'+M+'-'+D
            return value
        }
    },
    components:{
        foot,
        //pdf
    }
}
</script>
<style lang="less" scoped>
    .box{
        .t_tips{
            text-align: center;
            font-size: 0.35rem;
            line-height: 1rem;
        }
        .title{
            display: flex;
            background-color: #efefef;
            padding:0 2.5%;
            span{
                width: 0.1rem;
                height: 0.5rem;
                background-color: cadetblue;
                margin-top: 0.2rem;
                margin-right: 0.1rem;
            }
            p{
                line-height: 1rem;
                font-size: 0.5rem;
                color:#999
            }
        }
        .types{
            display: flex;
            justify-content: space-between;
            width: 92%;
            margin: 0 auto;
            padding: 10px 0;
            border-bottom: 1px solid #ebedf0;
            .name{
                font-size: 16px;

            }
        }
        .carNum{
            display: flex;
            justify-content: space-between;
            .btn{
                width: 2.5rem;
                height: .6rem;
                border-radius: .15rem;
                background-color: darkorange;
                line-height: 0.6rem;
                color:#fff;
                text-align: center;
                margin-top: 0.5rem;
                margin-right: 0.3rem;
            }
        }
        .tips{
            padding:0.8rem;
            box-sizing: border-box;
            background-color: #efefef;
            color:red;
            p{
                line-height: 0.6rem;
                
            }
        }
        .submit{
            width: 80%;
            height: 1rem;
            line-height: 1rem;
            background-color: #27b5a7;
            border: 0;
        }
        .order{
            width: 100%;
            height: 100vh;
            overflow: hidden;
            p{
                font-size: 0.4rem;
                color:#999;
                text-align: center;
                line-height: 4rem;
            }
            .order_list{
               height: 100%;
               overflow-y: auto;
               padding: 0.8rem 0 1.5rem 0;
               .checkbox{
                   padding: 0.3rem 0.8rem;
                   border-bottom: 1px dotted #333;
                   position: relative;
                   .item{
                        font-size: 0.4rem;
                        line-height: 0.6rem;
                        padding: 0 0.3rem;
                        width: 100%;
                        .money{
                            text-align: right;
                            position: absolute;
                            right: 0.3rem;
                            bottom: 0.3rem;
                            span{
                                font-size: 0.6rem;
                            }
                        }
                    }
                }
               
            }
        }
        .input_size{
            font-size: 16px;
            span{
                font-size: 16px;
            }
        }
        .radio_size{
            font-size: 14px;
        }
    }
    .next{
        button{
            background: #27b5a7!important;
        }
        
    }
</style>